<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '20px' }">
            <div class="demo-image__placeholder">
              <div class="block">
                <div style="padding: 14px">
                  <span class="demonstration">您上传的图片</span>
                </div>
                <el-image :src="src" fit="contain">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </div>
          </el-card>

          <el-card :body-style="{ padding: '100px' }">
            <el-upload
              align="middle"
              drag
              action=""
              multiple
              :limit="1"
              :auto-upload="false"
              :on-change="getFile"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>

              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-card>

          <el-card :body-style="{ padding: '20px' }">
            <div style="padding: 14px">
              <span class="demonstration">选项</span>
            </div>
            <el-form :inline="false" class="demo-form-inline">
              <el-form-item label="处理方式">
                <el-select v-model="kind" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.kind"
                    :label="item.label"
                    :value="item.kind"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="参数" v-if="options[kind - 1].args && !options[kind - 1].choice">
                <el-input
                  v-model.number="args[item]"
                  v-for="item in options[kind - 1].args"
                  :placeholder="item"
                  :key="item"
                  :rules="[
                    { type: 'number', message: '参数必须为数字值' },
                  ]"
                ></el-input>
              </el-form-item>

              <el-form-item label="参数"  v-if="options[kind - 1].args && options[kind - 1].choice">
              <el-select placeholder="请选择" v-model="args['kind']">
                <el-option
                    v-for="item in options[kind - 1].choice"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="处理图片">
                <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="primary"
                  @click="submitUpload"
                  >上传</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="grid-content bg-purple" v-loading="loading">
          <el-card :body-style="{ padding: '20px' }">
            <div style="padding: 14px">
              <span>处理后的图片</span>
            </div>
            <img style="height: 100%" :src="processed" class="image" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "IProcess",
  watch: {
    kind(n, o) {
      this.args = {};
    }
  },
  data() {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      image: "",
      identifier: "",
      processed:
        "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
      loading: false,
      options: [
        {
          kind: 1,
          label: "高斯平滑",
        },
      ],
      kind: 1,
      args: {}
    };
  },

  mounted() {
    this.getOptions();
  },

  methods: {
    getOptions() {
      this.$axios({
        url: "http://106.14.90.220:8000/api/images/options",
        methods: "get",
      }).then((response) => {
        console.log(response.data);
        this.options = response.data.options;
      });
    },
    submitUpload() {
      // TODO Axios发送请求
      console.log(this.args);
      if (!this.image) return;
      this.loading = true;
      this.$axios({
        url: "http://106.14.90.220:8000/api/images/processed",
        method: "post",
        data: JSON.stringify({
          image: this.image,
          kind: this.kind,
          args: this.args
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        // console.log(response.data);
        // this.identifier = response.data.identifier;
        // console.log(this.identifier)
        // 循环请求

        // let timer = setInterval(() => {
        //   this.$axios({
        //     url: `http://127.0.0.1:5000/api/images/${this.identifier}`,
        //     method: "get",
        //   }).then((result) => {
        //     // console.log(result);
        //     // console.log(result.data.status);
        //     if (result.data.status === 0) {
        //       clearInterval(timer);
        //       this.processed = "data:image/.+;base64," + result.data.image;
        //       this.loading = false;
        //     }
        //   });
        // }, 3000);
        if (response.data.code === 0) {
          // clearInterval(timer);
          this.processed = "data:image/.+;base64," + response.data.image;
          this.loading = false;
        }
      });
    },

    getFile(file) {
      if (file.raw.type === "image/jpeg" || file.raw.type === "image/png") {
        this.src = window.URL.createObjectURL(file.raw);
        this.getBase64(file.raw).then((res) => {
          this.image = res;
          // console.log(this.image);
        });
      }
    },

    // 处理图片文件
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 10px;
}
.el-form {
  margin-top: 10px;
}

.grid-content {
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
